<!--
 * @Author: deliteam 462085920@qq.com
 * @Date: 2023-12-12 09:59:22
 * @Description: 联系我们表单
-->

<template>
    <div class="contact__form">
        <div class="form__content">
            <form @submit.prevent="handleSubmit" ref="formRef" method="post">
                <!-- Name  -->
                <div class="list__col-1">
                    <label for="name">姓名</label>
                    <div class="qtr-linebreak"></div>
                    <input name="name" type="text" id="name" :required="false" v-model="formData.name">
                </div>
                <div class="half-linebreak"></div> <!-- Phone  -->
                <div class="list__col-1">
                    <label for="phone">手机号码</label>
                    <div class="qtr-linebreak"></div>
                    <input name="phone" type="tel" id="phone" required="" v-model="formData.phone">
                </div>
                <div class="half-linebreak"></div>
                <!-- Email  -->
                <div class="list__col-1">
                    <label for="email">邮箱</label>
                    <div class="qtr-linebreak"></div>
                    <input name="email" type="email" id="email" required="" v-model="formData.email">
                </div>
                <div class="half-linebreak"></div>
                <div class="list__col-1">
                    <label for="description">项目描述</label>
                    <div class="half-linebreak"></div>
                    <textarea name="message" id="description" wrap="hard" :required="false"
                        v-model="formData.description"></textarea>
                </div>
                <div class="linebreak"></div>
                <div class="list__col-1" style="display: flex;">
                    <!-- Submit  -->
                    <div class="list__col-1-2 submit">
                        <div class="submit-cta">
                            <input type="submit" id="submit" value="提交">
                        </div>
                    </div>
                    <!-- Close Button -->
                    <button data-aos="fade" class="list__col-1-2 closeButton bg_white aos-init aos-animate"
                        @click="closeForm">关闭</button>
                </div>
            </form>
            <div class="mobile-linebreak"></div>
            <div class="mobile-linebreak"></div>
        </div>
    </div>
</template>

<script setup>
const emit = defineEmits(['updateShowForm']);
const formData = ref({
    name: '',
    email: '',
    phone: '',
    description: ''
})
const formRef = ref(null); // 创建一个引用
const closeForm = () => {
    emit('updateShowForm', false)
};
const handleSubmit = async () => {
    console.log('[ handleSubmit ] >', handleSubmit)
    await useFetch("/api/contact", {
        baseURL: "/dev-api",
        lazy: true,
        method: "POST",
        body: formData.value,
    });
    alert('提交成功')
    formRef.value.reset(); // 调用表单的 reset 方法
}

</script>
<style lang='scss' scoped>
.contact__form {
    font-family: "gilroy", Sans-Serif;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 300;
    margin-bottom: -0.4rem;
    margin-top: -0.45rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-item-align: start;
    align-self: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 66%
}

@media screen and (min-width: 2200px) {
    .contact__form {
        font-size: 1.4rem;
        line-height: 2.1rem;
        margin-bottom: -0.55rem;
        margin-top: -0.5rem
    }
}

@media screen and (min-width: 1024px) and (max-width: 1399px) {
    .contact__form {
        font-size: 1.1rem;
        line-height: 1.5rem
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .contact__form {
        font-size: 1.15rem;
        line-height: 1.5rem;
        margin-bottom: -0.4rem;
        margin-top: -0.3rem
    }
}

@media screen and (max-width: 767px) {
    .contact__form {
        font-size: 1.15rem;
        line-height: 1.5rem;
        margin-bottom: -0.35rem;
        margin-top: -0.35rem
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .contact__form {
        font-family: "gilroy", Sans-Serif;
        font-size: 1.25rem;
        line-height: 1.75rem;
        font-weight: 300;
        margin-bottom: -0.4rem;
        margin-top: -0.45rem;
        width: 100%
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (min-width: 2200px) {
    .contact__form {
        font-size: 1.4rem;
        line-height: 2.1rem;
        margin-bottom: -0.55rem;
        margin-top: -0.5rem
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (min-width: 1024px) and (max-width: 1399px) {
    .contact__form {
        font-size: 1.1rem;
        line-height: 1.5rem
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (min-width: 768px) and (max-width: 1024px) {
    .contact__form {
        font-size: 1.15rem;
        line-height: 1.5rem;
        margin-bottom: -0.4rem;
        margin-top: -0.3rem
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (max-width: 767px) {
    .contact__form {
        font-size: 1.15rem;
        line-height: 1.5rem;
        margin-bottom: -0.35rem;
        margin-top: -0.35rem
    }
}

@media screen and (max-width: 767px) {
    .contact__form {
        font-family: "gilroy", Sans-Serif;
        font-size: 1.25rem;
        line-height: 1.75rem;
        font-weight: 300;
        margin-bottom: -0.4rem;
        margin-top: -0.45rem;
        width: 100%
    }
}

@media screen and (max-width: 767px) and (min-width: 2200px) {
    .contact__form {
        font-size: 1.4rem;
        line-height: 2.1rem;
        margin-bottom: -0.55rem;
        margin-top: -0.5rem
    }
}

@media screen and (max-width: 767px) and (min-width: 1024px) and (max-width: 1399px) {
    .contact__form {
        font-size: 1.1rem;
        line-height: 1.5rem
    }
}

@media screen and (max-width: 767px) and (min-width: 768px) and (max-width: 1024px) {
    .contact__form {
        font-size: 1.15rem;
        line-height: 1.5rem;
        margin-bottom: -0.4rem;
        margin-top: -0.3rem
    }
}

@media screen and (max-width: 767px) and (max-width: 767px) {
    .contact__form {
        font-size: 1.15rem;
        line-height: 1.5rem;
        margin-bottom: -0.35rem;
        margin-top: -0.35rem
    }
}

.contact__form .form__content {
    width: 100%;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center
}

@media screen and (max-width: 767px) {
    .contact__form .form__content {
        -ms-flex-item-align: start;
        align-self: flex-start
    }
}

.contact__form .form__background {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1
}

.form::-webkit-scrollbar {
    display: none
}

.contact__hidden {
    display: none
}

.contact__visible {
    display: block
}

form {
    box-sizing: border-box;
    word-wrap: break-word
}

form input {
    border: 1px solid black;
    word-wrap: break-word;
    width: 100%;
    padding: 10px;
    color: black;
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    font-family: "gilroy", Sans-Serif;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 300;
    margin-bottom: -0.4rem;
    margin-top: -0.45rem
}

@media screen and (min-width: 2200px) {
    form input {
        font-size: 1.4rem;
        line-height: 2.1rem;
        margin-bottom: -0.55rem;
        margin-top: -0.5rem
    }
}

@media screen and (min-width: 1024px) and (max-width: 1399px) {
    form input {
        font-size: 1.1rem;
        line-height: 1.5rem
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    form input {
        font-size: 1.15rem;
        line-height: 1.5rem;
        margin-bottom: -0.4rem;
        margin-top: -0.3rem
    }
}

@media screen and (max-width: 767px) {
    form input {
        font-size: 1.15rem;
        line-height: 1.5rem;
        margin-bottom: -0.35rem;
        margin-top: -0.35rem
    }
}

@media screen and (max-width: 767px) {
    form input {
        padding: 10px
    }
}

form input:focus {
    outline: 0;
    background-color: #fff
}

form input[type="submit"] {
    cursor: pointer
}

form input[type="submit"]:hover {
    font-family: "gilroy", Sans-Serif;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 300;
    margin-bottom: -0.4rem;
    margin-top: -0.45rem
}

@media screen and (min-width: 2200px) {
    form input[type="submit"]:hover {
        font-size: 1.4rem;
        line-height: 2.1rem;
        margin-bottom: -0.55rem;
        margin-top: -0.5rem
    }
}

@media screen and (min-width: 1024px) and (max-width: 1399px) {
    form input[type="submit"]:hover {
        font-size: 1.1rem;
        line-height: 1.5rem
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    form input[type="submit"]:hover {
        font-size: 1.15rem;
        line-height: 1.5rem;
        margin-bottom: -0.4rem;
        margin-top: -0.3rem
    }
}

@media screen and (max-width: 767px) {
    form input[type="submit"]:hover {
        font-size: 1.15rem;
        line-height: 1.5rem;
        margin-bottom: -0.35rem;
        margin-top: -0.35rem
    }
}

form input[type="submit"]:focus {
    outline: none
}

form input:-webkit-autofill,
form input:-webkit-autofill:hover,
form input:-webkit-autofill:focus,
form textarea:-webkit-autofill,
form textarea:-webkit-autofill:hover,
form textarea:-webkit-autofill:focus,
form select:-webkit-autofill,
form select:-webkit-autofill:hover,
form select:-webkit-autofill:focus {
    border: 1px solid black;
    -webkit-text-fill-color: black;
    background-color: #fff;
    transition: background-color 5000s ease-in-out 0s
}

form textarea {
    border: 1px solid black;
    width: 100%;
    padding: 10px;
    color: black;
    background-color: #fff;
    font-family: "gilroy", Sans-Serif;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 300;
    margin-bottom: -0.4rem;
    margin-top: -0.45rem;
    height: auto;
    vertical-align: top;
    word-wrap: break-word;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    overflow: hidden;
    text-align: top;
    resize: none;
    overflow: auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0
}

@media screen and (min-width: 2200px) {
    form textarea {
        font-size: 1.4rem;
        line-height: 2.1rem;
        margin-bottom: -0.55rem;
        margin-top: -0.5rem
    }
}

@media screen and (min-width: 1024px) and (max-width: 1399px) {
    form textarea {
        font-size: 1.1rem;
        line-height: 1.5rem
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    form textarea {
        font-size: 1.15rem;
        line-height: 1.5rem;
        margin-bottom: -0.4rem;
        margin-top: -0.3rem
    }
}

@media screen and (max-width: 767px) {
    form textarea {
        font-size: 1.15rem;
        line-height: 1.5rem;
        margin-bottom: -0.35rem;
        margin-top: -0.35rem
    }
}

@media screen and (max-width: 767px) {
    form textarea {
        padding: 10px
    }
}

form textarea:focus {
    outline: 0
}

form select {
    border: 1px solid black;
    border-radius: 0px;
    word-wrap: break-word;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 10px;
    color: black;
    background-color: #fff;
    font-family: "gilroy", Sans-Serif;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 300;
    margin-bottom: -0.4rem;
    margin-top: -0.45rem
}

@media screen and (min-width: 2200px) {
    form select {
        font-size: 1.4rem;
        line-height: 2.1rem;
        margin-bottom: -0.55rem;
        margin-top: -0.5rem
    }
}

@media screen and (min-width: 1024px) and (max-width: 1399px) {
    form select {
        font-size: 1.1rem;
        line-height: 1.5rem
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    form select {
        font-size: 1.15rem;
        line-height: 1.5rem;
        margin-bottom: -0.4rem;
        margin-top: -0.3rem
    }
}

@media screen and (max-width: 767px) {
    form select {
        font-size: 1.15rem;
        line-height: 1.5rem;
        margin-bottom: -0.35rem;
        margin-top: -0.35rem
    }
}

@media screen and (max-width: 767px) {
    form select {
        padding: 10px
    }
}

form select:focus {
    outline: 0
}

.select {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.select .select-indicator {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    padding-left: 15px;
    padding-right: 15px
}

.submit {
    margin-right: 15px
}

@media screen and (max-width: 767px) {
    .submit {
        padding: 0%
    }
}

#submit {
    padding: 15px;
    opacity: 1;
    transition: opacity 1s ease
}

form:valid #submit {
    opacity: 1;
    visibility: visible;
    font-family: "gilroy", Sans-Serif;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 300;
    margin-bottom: -0.4rem;
    margin-top: -0.45rem;
    background-color: transparent;
    transition: opacity 1s ease
}

@media screen and (min-width: 2200px) {
    form:valid #submit {
        font-size: 1.4rem;
        line-height: 2.1rem;
        margin-bottom: -0.55rem;
        margin-top: -0.5rem
    }
}

@media screen and (min-width: 1024px) and (max-width: 1399px) {
    form:valid #submit {
        font-size: 1.1rem;
        line-height: 1.5rem
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    form:valid #submit {
        font-size: 1.15rem;
        line-height: 1.5rem;
        margin-bottom: -0.4rem;
        margin-top: -0.3rem
    }
}

@media screen and (max-width: 767px) {
    form:valid #submit {
        font-size: 1.15rem;
        line-height: 1.5rem;
        margin-bottom: -0.35rem;
        margin-top: -0.35rem
    }
}

form:valid #submit:hover {
    background-color: black;
    color: #fff
}

.browser-safari select {
    font-family: sans-serif
}

.form-header {
    display: -ms-flexbox;
    display: flex;
    margin: unset;
    position: absolute;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    left: 0px;
    top: 0px;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 25px;
    padding-bottom: 25px
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .form-header {
        padding-left: 5%;
        padding-right: 5%
    }
}

@media screen and (max-width: 767px) {
    .form-header {
        position: relative;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        height: 80px
    }
}
</style>